<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
        user-scalable=no, 
        initial-scale=1.0, 
        maximum-scale=1.0, 
        minimum-scale=1.0">


    <title>我是网易云</title>
    <!-- IMPORT CSS -->
    <link rel="stylesheet" href="css/reset.min.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 自动加前缀 -->
    <script src="./js/prefixfree.min.js" async></script>
    <script>
        // 计算REM和PX的换算比例
        (function () {
            const computed = () => {
                let winW = document.documentElement.clientWidth
                let ratio = 100
                if (winW >= 750) {
                    document.documentElement.style.fontSize = '100px'
                    return
                }
                ratio = winW / (750 / 100)
                document.documentElement.style.fontSize = ratio + 'px'
            }
            computed()

            // 检查是否存在横竖屏切换事件
            // 有就用 没有用resize
            let event = window.hasOwnProperty('onorientationchange') ? 'orientationchange' : 'resize'
            window.addEventListener("event", computed)
        })()
    </script>
</head>

<body>
    <div id="app">
        <!-- 头部区域开始 -->
        <div class="head-box">
            <div class="leftbox">
                <img src="./images/Ma.png" alt="" class="pic">
                <h2>&nbsp; 接化发</h2>
                <h3>&nbsp; 拼音师/马保国</h3>
            </div>
            <a href="javascript:;" class="right-box"></a>
        </div>
        <!-- 头部区域结束 -->
        
        <!-- 歌词区域开始 -->
        <div class="mainbox">
            <div class="lyric">
                <div class="wrapper">
                    <!-- <p class="active">
                        我的梦 (华为手机主题曲) - 张靓颖
                    </p>
                    <p>
                        词：王海涛/张靓颖
                    </p> -->
                </div>
            </div>
        </div>
        <!-- 歌词区域结束 -->

        <!-- 底部区域开始 -->
        <div class="footer">
            <div class="progress">
                <span class="already">00:00</span>
                <div class="back">
                    <div class="rate"></div>
                </div>
                <span class="duration">00:00</span>
            </div>
            <a href="https://music.163.com/" class="download">
                <img src="./images/favicon.ico" alt="">
                我是网易云</a>
        </div>
        <!-- 底部区域结束 -->

        <!-- 背景和遮罩层开始 -->
        <div class="bg-img"></div>
        <div class="bg-mark"></div>
        <!-- 背景和遮罩层结束 -->

        <!-- 音频开始 -->
        <audio src="./images/Ma.m4a" id="myaudio" preload="metadata"></audio>
        <!-- 音频结束 -->
    </div>

    <!-- IMPORT JS -->
    <script src="./js/fastclick.js" defer></script>
    <script src="./js/subscribe.js" defer></script>
    <script src="./js/index.js" defer></script>
</body>

</html>